// 找到图片
let image =$('#image')
// 剪裁配置项
let option = {
  // 剪裁比例
  aspectRatio:1,
  // 指定预览区
  preview:'.img-preview',
}
// 调用cropper方法 实现初始的方法
image.cropper(option)

// 点击上传，触发文件域的单击事件
$('button:contains("上传")').on('click',function(){
  $('#file').trigger('click')
})

// 选择图片，更换剪裁区图片
$('#file').on('change',function(){
  // 获取图片的url地址
  if (this.files.length >0) {
    // 找到文件对象
    // console.dir(this)
    let fileObj = this.files[0]
    // 创建url
    let url = URL.createObjectURL(fileObj)
    // console.log(url)
    // 更换剪裁区的图片 cropper('destroy)破坏裁剪工具
    // image.cropper('destroy').attr('src',url).cropper(option)
    image.cropper('replace',url)
  }
})

// 完成更换
// 点击确定按钮  剪裁图片 转换成bass64格式  提交给接口
$('button:contains("确定")').on('click',function(){
  // 剪裁
  let canvas = image.cropper('getCroppedCanvas',{width:30,height:30})
  // canvas 有内置api方法  属于js原生语法 只有指定jpeg格式才能指定图片质量（'image/jpeg',0-1）
  let base64 = canvas.toDataURL()
  // console.log(base64)
  axios.post('/my/user/avatar',`avatar=${encodeURIComponent(base64)}`).then(res => {
    let {status,message} = res.data
    if (status === 0) {
      layer.msg(message)
      // 更换了头像，更新父页面（index.html)的头像
      window.parent.getUserInfo()
    }
  })
})